<!-- 单个文件选择组件，解决同名文件无法覆盖，以及回显问题 -->
<template>
	<div>
		<button @click="click" class="buttonfile">{{title}}</button>
		<span class="namestyle">{{getFileName()}}</span>
		<!-- input 用于选取文件 -->
		<input class="filestyle" ref="fileRef" type="file" @change="fileChange" :accept="accept" />
	</div>
</template>

<script>
	export default {
		name: "SingleFileChose",
		props: {
			//按钮的标题
			title: {
				type: String,
				default: "选择文件"
			},
			accept: String, //接受的文件类型
			value: File, //文件对象 方便vmodel
		},
		components: {},
		data() {
			return {};
		},
		created() {


		},
		methods: {
			fileChange(e) {
				const file = e.target.files[0];
				//接收文件之后 清空文件列表 避免同名文件不能再次上传。我们只要他的选取文件的功能
				const dt = new DataTransfer()
				e.target.files = dt.files
				this.$emit("input", file); //vmodel事件 通知外部改值
				this.$emit("change", file); //change事件
			},
			getFileName() {
				if (this.value == null) {
					return ""
				}
				return this.value.name;
			},
			//模拟点击 用来显示文件选择页面
			click() {
				this.$refs.fileRef.click()
			}
		}
	};
</script>

<style scoped="" lang="scss">
	.filestyle {
		display: none;
	}

	.namestyle {
		display: inline-block;
		padding-left: 5px;
		font-size: 17px;
	}

	.buttonfile {
		display: inline-block;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		border: 1px solid #DCDFE6;
		-webkit-appearance: none;
		-webkit-user-select: none;
		text-align: center;
		box-sizing: border-box;
		outline: 0;
		margin: 0;
		transition: .1s;
		font-weight: 500;
		color: #409EFF;
		background: #ecf5ff;
		border-color: #b3d8ff;
		padding: 0.36458vw;
		border-radius: 0.36458vw;
		font-size: 0.625vw;
	}
</style>
